<template>
	<view class="wrap" style="padding-bottom: 50px;">
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode="widthFix"></image>
		<!-- <headers :enable="enable" title="提现" /> -->
		<view class="form">
			<view class="noCard">
				<view class="left">
					<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/39.png" mode="widthFix">
					</image>
					您还没有添加支付宝信息
				</view>
				<view @click="add" class="right">
					去添加
					<image class="more" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/28.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="canuse">
				<view class="top">
					<view class="left">
						<view class="name">
							可提现余额 (元)
						</view>
						<view class="num">
							399.50
						</view>
					</view>
					<view @click="getmoney" class="btn">
						立即提现
					</view>
				</view>
				<view class="desc1">
					<view class="tit">
						温馨提示
					</view>
					<view class="desc">
						<view>
							收益金额满1元即可进行提现，暂无上限
						</view>
						<view>提现时间：任何时间均可自助提现，24小时内到账</view>
						<view>如有提现失败，请立即联系平台客服</view>
					</view>
					<!-- <image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/40.png" mode="widthFix">
					</image> -->
				</view>
			</view>

			<view class="cacu">
				<view class="line">
					<view class="item">
						<view class="name">
							总收益 (元)
						</view>
						<view class="nums">
							89.50
						</view>
					</view>
					<view class="item">
						<view class="name">
							昨日已结算 (元)
						</view>
						<view class="nums">
							89.50
						</view>
					</view>
				</view>
				<view class="line">
					<view class="item">
						<view class="name">
							本月总收益 (元)
						</view>
						<view class="nums">
							199.56
						</view>
					</view>
					<view class="item">
						<view class="name">
							上月总结算 (元)
						</view>
						<view class="nums">
							899.29
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="titles">
			提现记录
			<view class="sel">
				<u-input :border="false" type="select" :select-open="actionSheetShow" v-model="type" placeholder="请选择"
					@click="actionSheetShow = true"></u-input>
				<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback">
				</u-action-sheet>
			</view>
		</view>

		<list />
		
		
		<!-- 选择提现方式 -->
		
		<u-popup border-radius="29" v-model="typeMask" mode="center">
			<view >
				<types @closeMask="closeMask" />
			</view>
			<image @click="typeMask=false" class="close" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/33.png" mode=""></image>
		</u-popup>
	</view>
</template>
<script>
	import list from './list.vue'
		import types from './components/type.vue'
	import headers from '@/components/headnavbar/index.vue'
	export default {
		onPageScroll(e) {
			this.enable = e.scrollTop > 100 ? true : false
		},
		components: {
			headers,
			list,
			types
		},
		data() {

			return {
				typeMask:false,
				enable: false,
				actionSheetShow: false,
				actionSheetList: [{
						text: '全部类型'
					},
					{
						text: '类型A'
					},
					{
						text: '类型B'
					}
				],
			};
		},

		methods: {
			closeMask(){
				this.typeMask = false
			},
			getmoney(){
				this.typeMask = true
			},
			add() {
				uni.navigateTo({
					url: "/pages/sys/user/addCard"
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.type = this.actionSheetList[index].text;
			},
		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-mode-center-box{
		background: none !important;
	}
	.close{
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		margin: 46rpx auto;
	}
	.titles {
		font-size: 28rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #333333;
		line-height: 33rpx;
		display: flex;
		align-items: center;
		padding: 0 34rpx;
		justify-content: space-between;

		.sel {
			width: 75px;
			font-size: 24rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #333333;
			line-height: 28rpx;

			/deep/ .u-icon__icon {
				transform: scale(0.6);
			}
		}
	}

	.form {
		// min-height: 800px;

		.cacu {
			margin: 32rpx 0 0;
			padding: 42rpx 37rpx 32rpx 46rpx;
			// height: 300rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			border: 5rpx solid #E8EAFF;


			.line {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #D2DEFF;

				&:last-child {
					border-bottom: none;

					.item {
						padding-top: 30rpx;
					}
				}

				.item {
					width: 50%;
					padding: 0 0 20rpx 32rpx;

					border-right: 1rpx solid #D2DEFF;

					&:nth-child(2n) {
						border-right: none;
						padding-left: 58rpx;
					}

					.name {
						font-size: 24rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						color: #333333;
						line-height: 28rpx;
					}

					.nums {
						font-size: 39rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #3757FF;
						line-height: 46rpx;
					}
				}
			}

		}

		.canuse {
			margin: 1rpx auto;
			padding-bottom: 32rpx;
			width: 686rpx;
			// height: 403rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;

			.desc1 {
				padding: 35rpx 32rpx 32rpx;
				background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/40.png') no-repeat;
				background-size: cover;
				width: 623rpx;
				height: 202rpx;
				margin: -10rpx auto 0;
				.tit{
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #9351FF;
					line-height: 30rpx;
					margin-bottom: 8rpx;
				}
				.desc{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A17CDD;
					line-height: 37rpx;
				}

				.img {
					width: 100%;
				}
			}

			.top {
				margin: 44rpx 32rpx 20rpx 47rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					flex: 1;

					.name {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.num {
						font-size: 56rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #3757FF;
						line-height: 66rpx;
					}
				}

				.btn {
					width: 208rpx;
					height: 74rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33rpx;
					background: #3757FF;
					border-radius: 30px;
				}
			}
		}

		.noCard {
			width: 686rpx;
			height: 115rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				font-size: 27rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 32rpx;

				.icon {
					width: 94rpx;
					height: 77rpx;
					margin-right: 9rpx;
				}
			}

			.right {
				margin-right: 32rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
				font-size: 27rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #3757FF;
				line-height: 32rpx;

				.more {
					width: 14rpx;
					height: 7rpx;
					margin-left: 18rpx;
				}
			}
		}
	}
</style>
